Search field: Added aria-label and name to search input for accessibility (closes #21938)#21962
Conversation
- Add aria-label attribute to search input using localized placeholder text
- Add name attribute ("search-input") to provide form field identification
- Fixes Google Console warning about missing id/name on form field
- Improves WCAG 3.3.2 compliance (Labels or Instructions)
- Improves WCAG 2.5.3 compliance (Form input identifiable names)
Closes umbraco#2193
|
Hi there @andreaslborg, thank you for this contribution! 👍 While we wait for one of the Core Collaborators team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:
Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution. If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request. Thanks, from your friendly Umbraco GitHub bot 🤖 🙂 |
|
Sorry @leekelleher, I updated the branch then realised its on your review list :) |
|
@emmagarland No problem at all. I hadn't got around to reviewing it yet. |
leekelleher
left a comment
There was a problem hiding this comment.
Super, thanks @andreaslborg!
I made a couple of tweaks whilst reviewing, just minor code tidy-up that I'd been wanting to do for a while, nothing directly related to your fix.
Updated [Umbraco.Cms.Persistence.Sqlite](https://github.com/umbraco/Umbraco-CMS) from 17.2.2 to 17.3.0. <details> <summary>Release notes</summary> _Sourced from [Umbraco.Cms.Persistence.Sqlite's releases](https://github.com/umbraco/Umbraco-CMS/releases)._ ## 17.3.0 ## Upgrade Notes In 17.3 we have upgraded our dependency on `MailKit` to 4.15.1. This is a minor version update, but we found a few changes we had to make in core to accommodate changes to nullability constraints. Unless using methods of this library, or it's transitive dependency `MimeKit`, it's unlikely projects will be affected. The update is necessary though, as the version we previously depended on now has a security vulnerability raised against it. We have made a change to how we handle redirects which brings a significant performance improvement for publish time on large sites, when documents with many descendent nodes are published. If you have custom URL providers you should review this change, as there are some [very rare cases](umbraco/Umbraco-CMS#22091 (comment)) where you'll need to adjust to ensure descendent redirects are correctly handled. Note also that we now auto-generate HMAC secret key for new installs. This has been applied to make Umbraco more secure by default, but it's not been forced for upgrades. ## What's Changed Since 17.3.0-rc3 **Full Changelog**: umbraco/Umbraco-CMS@release-17.3.0-rc3...release-17.3.0 ## What's Changed Since 17.3.0-rc2 ### 📦 Dependencies * Dependencies: Update Microsoft packages to latest patch and fix HybridCache ParseFault with Redis by @AndyButland in umbraco/Umbraco-CMS#22278 ### 🐛 Bug Fixes * Examine: Fix DocumentUrlService not initialized during Examine indexing after package upgrade by @AndyButland in umbraco/Umbraco-CMS#22243 * Unattended Upgrades: Rebuild routing caches after background migrations to fix unrouteable document URLs by @AndyButland in umbraco/Umbraco-CMS#22269 * Migrations: Fix NPoco auto-select breaking re-trust FK migration by @AndyButland in umbraco/Umbraco-CMS#22270 **Full Changelog**: umbraco/Umbraco-CMS@release-17.3.0-rc2...release-17.3.0-rc3 ## What's Changed Since 17.3.0-rc1 ### 🐛 Bug Fixes * Migrations: Fix re-trust constraints migration targeting non-Umbraco tables and transaction failure (closes #22227) by @AndyButland in umbraco/Umbraco-CMS#22229 * Distributed Locking: Add ROWLOCK hint to prevent cross-row contention on umbracoLock table (closes #22113) by @AndyButland in umbraco/Umbraco-CMS#22126 * Application URLs: Prevent back office hosts being overwritten in a shared database setup (closes #16741) by @matthewcare in umbraco/Umbraco-CMS#22160 * Migrations: Fix property detection for invariant content types with culture-varying compositions (closes #22159) by @AndyButland in umbraco/Umbraco-CMS#22167 * Migrations: Fix package migrations not running after fresh install with packages (closes #22202) by @AndyButland in umbraco/Umbraco-CMS#22204 **Full Changelog**: umbraco/Umbraco-CMS@release-17.3.0-rc...release-17.3.0-rc2 ## What's Changed Since the Previous Version (17.2.2) ### 🙌 Notable Changes * Templates: Add optional Central Package Management support to UmbracoProject and UmbracoExtension templates by @NguyenThuyLan in umbraco/Umbraco-CMS#21641 * Service registration: Allow running Umbraco with different combinations of backoffice, website and delivery API (closes #21622) by @AndyButland in umbraco/Umbraco-CMS#21630 * Imaging Configuration: Auto-generate HMAC secret key for new installs by @AndyButland in umbraco/Umbraco-CMS#21976 * Migrations: Run unattended upgrades in background, add liveness/readiness health probes (closes #21987) by @AndyButland in umbraco/Umbraco-CMS#22020 ### 💥 Breaking Changes * Dependencies: Update MailKit to 4.15.1 by @AndyButland in umbraco/Umbraco-CMS#22028 ### 📦 Dependencies * Bump lodash from 4.17.21 to 4.17.23 in /tests/Umbraco.Tests.AcceptanceTest in the npm_and_yarn group across 1 directory by @dependabot[bot] in umbraco/Umbraco-CMS#21519 ... (truncated) ## 17.3.0-rc3 ## Upgrade Notes In 17.3 we have upgraded our dependency on `MailKit` to 4.15.1. This is a minor version update, but we found a few changes we had to make in core to accommodate changes to nullability constraints. Unless using methods of this library, or it's transitive dependency `MimeKit`, it's unlikely projects will be affected. The update is necessary though, as the version we previously depended on now has a security vulnerability raised against it. We have made a change to how we handle redirects which brings a significant performance improvement for publish time on large sites, when documents with many descendent nodes are published. If you have custom URL providers you should review this change, as there are some [very rare cases](umbraco/Umbraco-CMS#22091 (comment)) where you'll need to adjust to ensure descendent redirects are correctly handled. Note also that we now auto-generate HMAC secret key for new installs. This has been applied to make Umbraco more secure by default, but it's not been forced for upgrades. ## What's Changed Since 17.3.0-rc2 ### 📦 Dependencies * Dependencies: Update Microsoft packages to latest patch and fix HybridCache ParseFault with Redis by @AndyButland in umbraco/Umbraco-CMS#22278 ### 🐛 Bug Fixes * Examine: Fix DocumentUrlService not initialized during Examine indexing after package upgrade by @AndyButland in umbraco/Umbraco-CMS#22243 * Unattended Upgrades: Rebuild routing caches after background migrations to fix unrouteable document URLs by @AndyButland in umbraco/Umbraco-CMS#22269 * Migrations: Fix NPoco auto-select breaking re-trust FK migration by @AndyButland in umbraco/Umbraco-CMS#22270 **Full Changelog**: umbraco/Umbraco-CMS@release-17.3.0-rc2...release-17.3.0-rc3 ## What's Changed Since 17.3.0-rc1 ### 🐛 Bug Fixes * Migrations: Fix re-trust constraints migration targeting non-Umbraco tables and transaction failure (closes #22227) by @AndyButland in umbraco/Umbraco-CMS#22229 * Distributed Locking: Add ROWLOCK hint to prevent cross-row contention on umbracoLock table (closes #22113) by @AndyButland in umbraco/Umbraco-CMS#22126 * Application URLs: Prevent back office hosts being overwritten in a shared database setup (closes #16741) by @matthewcare in umbraco/Umbraco-CMS#22160 * Migrations: Fix property detection for invariant content types with culture-varying compositions (closes #22159) by @AndyButland in umbraco/Umbraco-CMS#22167 * Migrations: Fix package migrations not running after fresh install with packages (closes #22202) by @AndyButland in umbraco/Umbraco-CMS#22204 **Full Changelog**: umbraco/Umbraco-CMS@release-17.3.0-rc...release-17.3.0-rc2 ## What's Changed Since the Previous Version (17.2.2) ### 🙌 Notable Changes * Templates: Add optional Central Package Management support to UmbracoProject and UmbracoExtension templates by @NguyenThuyLan in umbraco/Umbraco-CMS#21641 * Service registration: Allow running Umbraco with different combinations of backoffice, website and delivery API (closes #21622) by @AndyButland in umbraco/Umbraco-CMS#21630 * Imaging Configuration: Auto-generate HMAC secret key for new installs by @AndyButland in umbraco/Umbraco-CMS#21976 * Migrations: Run unattended upgrades in background, add liveness/readiness health probes (closes #21987) by @AndyButland in umbraco/Umbraco-CMS#22020 ### 💥 Breaking Changes * Dependencies: Update MailKit to 4.15.1 by @AndyButland in umbraco/Umbraco-CMS#22028 ### 📦 Dependencies * Bump lodash from 4.17.21 to 4.17.23 in /tests/Umbraco.Tests.AcceptanceTest in the npm_and_yarn group across 1 directory by @dependabot[bot] in umbraco/Umbraco-CMS#21519 * Bump the npm_and_yarn group across 2 directories with 2 updates by @dependabot[bot] in umbraco/Umbraco-CMS#21754 * Bump qs from 6.14.1 to 6.14.2 in /src/Umbraco.Web.UI.Client in the npm_and_yarn group across 1 directory by @dependabot[bot] in umbraco/Umbraco-CMS#21755 * Dependencies: Bumps @umbraco-ui/uui from 1.17.0 to 1.17.1 by @iOvergaard in umbraco/Umbraco-CMS#22029 * Dependencies: Updates @umbraco-ui/uui to 1.17.2 to fix multiple folder drag-and-drop failing (closes #21837) by @iOvergaard in umbraco/Umbraco-CMS#21886 ... (truncated) ## 17.3.0-rc2 ## Upgrade Notes In 17.3 we have upgraded our dependency on `MailKit` to 4.15.1. This is a minor version update, but we found a few changes we had to make in core to accommodate changes to nullability constraints. Unless using methods of this library, or it's transitive dependency `MimeKit`, it's unlikely projects will be affected. The update is necessary though, as the version we previously depended on now has a security vulnerability raised against it. We have made a change to how we handle redirects which brings a significant performance improvement for publish time on large sites, when documents with many descendent nodes are published. If you have custom URL providers you should review this change, as there are some [very rare cases](umbraco/Umbraco-CMS#22091 (comment)) where you'll need to adjust to ensure descendent redirects are correctly handled. Note also that we now auto-generate HMAC secret key for new installs. This has been applied to make Umbraco more secure by default, but it's not been forced for upgrades. ## What's Changed Since 17.3.0-rc1 ### 🐛 Bug Fixes * Migrations: Fix re-trust constraints migration targeting non-Umbraco tables and transaction failure (closes #22227) by @AndyButland in umbraco/Umbraco-CMS#22229 * Distributed Locking: Add ROWLOCK hint to prevent cross-row contention on umbracoLock table (closes #22113) by @AndyButland in umbraco/Umbraco-CMS#22126 * Application URLs: Prevent back office hosts being overwritten in a shared database setup (closes #16741) by @matthewcare in umbraco/Umbraco-CMS#22160 * Migrations: Fix property detection for invariant content types with culture-varying compositions (closes #22159) by @AndyButland in umbraco/Umbraco-CMS#22167 * Migrations: Fix package migrations not running after fresh install with packages (closes #22202) by @AndyButland in umbraco/Umbraco-CMS#22204 **Full Changelog**: umbraco/Umbraco-CMS@release-17.3.0-rc...release-17.3.0-rc2 ## What's Changed Since the Previous Version (17.2.2) ### 🙌 Notable Changes * Templates: Add optional Central Package Management support to UmbracoProject and UmbracoExtension templates by @NguyenThuyLan in umbraco/Umbraco-CMS#21641 * Service registration: Allow running Umbraco with different combinations of backoffice, website and delivery API (closes #21622) by @AndyButland in umbraco/Umbraco-CMS#21630 * Imaging Configuration: Auto-generate HMAC secret key for new installs by @AndyButland in umbraco/Umbraco-CMS#21976 * Migrations: Run unattended upgrades in background, add liveness/readiness health probes (closes #21987) by @AndyButland in umbraco/Umbraco-CMS#22020 ### 💥 Breaking Changes * Dependencies: Update MailKit to 4.15.1 by @AndyButland in umbraco/Umbraco-CMS#22028 ### 📦 Dependencies * Bump lodash from 4.17.21 to 4.17.23 in /tests/Umbraco.Tests.AcceptanceTest in the npm_and_yarn group across 1 directory by @dependabot[bot] in umbraco/Umbraco-CMS#21519 * Bump the npm_and_yarn group across 2 directories with 2 updates by @dependabot[bot] in umbraco/Umbraco-CMS#21754 * Bump qs from 6.14.1 to 6.14.2 in /src/Umbraco.Web.UI.Client in the npm_and_yarn group across 1 directory by @dependabot[bot] in umbraco/Umbraco-CMS#21755 * Dependencies: Bumps @umbraco-ui/uui from 1.17.0 to 1.17.1 by @iOvergaard in umbraco/Umbraco-CMS#22029 * Dependencies: Updates @umbraco-ui/uui to 1.17.2 to fix multiple folder drag-and-drop failing (closes #21837) by @iOvergaard in umbraco/Umbraco-CMS#21886 * Backoffice: Update vite from 7.1.11 to 7.3.1 by @iOvergaard in umbraco/Umbraco-CMS#22065 * Dependencies: Update server-side dependencies to latest patch or minor releases by @AndyButland in umbraco/Umbraco-CMS#21860 ### 🚤 Performance * Performance: Implement key-based caching for data type and template repositories by @AndyButland in umbraco/Umbraco-CMS#21280 * Management API: Optimize collection view performance by eliminating N+1 patterns by @AndyButland in umbraco/Umbraco-CMS#21684 * Performance: Optimize handling of content type updates by @kjac in umbraco/Umbraco-CMS#21910 * Backoffice Performance: Add inflight request deduplication to item data request managers by @madsrasmussen in umbraco/Umbraco-CMS#21767 * URL and Alias Caches: Optimize for invariant documents by @AndyButland in umbraco/Umbraco-CMS#21558 * Custom Views: Prevent re-rendering Block Views and Properties by @rickbutterfield in umbraco/Umbraco-CMS#21186 * Core: Minimize await to a single JS cycle (refactor #21186) by @nielslyngsoe in umbraco/Umbraco-CMS#22074 * Auth: Skip /token refresh when access token is still valid by @iOvergaard in umbraco/Umbraco-CMS#22087 * Memory Management: Dispose `IDisposable` resources correctly in four internal classes by @AndyButland in umbraco/Umbraco-CMS#22014 * Redirect Tracking: Fix segment change detection and optimise descendant traversal (closes #22082) by @AndyButland in umbraco/Umbraco-CMS#22091 ... (truncated) ## 17.3.0-rc ## Upgrade Notes In 17.3 we have upgraded our dependency on `MailKit` to 4.15.1. This is a minor version update, but we found a few changes we had to make in core to accommodate changes to nullability constraints. Unless using methods of this library, or it's transitive dependency `MimeKit`, it's unlikely projects will be affected. The update is necessary though, as the version we previously depended on now has a security vulnerability raised against it. We have made a change to how we handle redirects which brings a significant performance improvement for publish time on large sites, when documents with many descendent nodes are published. If you have custom URL providers you should review this change, as there are some [very rare cases](umbraco/Umbraco-CMS#22091 (comment)) where you'll need to adjust to ensure descendent redirects are correctly handled. Note also that we now auto-generate HMAC secret key for new installs. This has been applied to make Umbraco more secure by default, but it's not been forced for upgrades. ## What's Changed ### 🙌 Notable Changes * Templates: Add optional Central Package Management support to UmbracoProject and UmbracoExtension templates by @NguyenThuyLan in umbraco/Umbraco-CMS#21641 * Service registration: Allow running Umbraco with different combinations of backoffice, website and delivery API (closes #21622) by @AndyButland in umbraco/Umbraco-CMS#21630 * Imaging Configuration: Auto-generate HMAC secret key for new installs by @AndyButland in umbraco/Umbraco-CMS#21976 * Migrations: Run unattended upgrades in background, add liveness/readiness health probes (closes #21987) by @AndyButland in umbraco/Umbraco-CMS#22020 ### 💥 Breaking Changes * Dependencies: Update MailKit to 4.15.1 by @AndyButland in umbraco/Umbraco-CMS#22028 ### 📦 Dependencies * Bump lodash from 4.17.21 to 4.17.23 in /tests/Umbraco.Tests.AcceptanceTest in the npm_and_yarn group across 1 directory by @dependabot[bot] in umbraco/Umbraco-CMS#21519 * Bump the npm_and_yarn group across 2 directories with 2 updates by @dependabot[bot] in umbraco/Umbraco-CMS#21754 * Bump qs from 6.14.1 to 6.14.2 in /src/Umbraco.Web.UI.Client in the npm_and_yarn group across 1 directory by @dependabot[bot] in umbraco/Umbraco-CMS#21755 * Dependencies: Bumps @umbraco-ui/uui from 1.17.0 to 1.17.1 by @iOvergaard in umbraco/Umbraco-CMS#22029 * Dependencies: Updates @umbraco-ui/uui to 1.17.2 to fix multiple folder drag-and-drop failing (closes #21837) by @iOvergaard in umbraco/Umbraco-CMS#21886 * Backoffice: Update vite from 7.1.11 to 7.3.1 by @iOvergaard in umbraco/Umbraco-CMS#22065 * Dependencies: Update server-side dependencies to latest patch or minor releases by @AndyButland in umbraco/Umbraco-CMS#21860 ### 🚤 Performance * Performance: Implement key-based caching for data type and template repositories by @AndyButland in umbraco/Umbraco-CMS#21280 * Management API: Optimize collection view performance by eliminating N+1 patterns by @AndyButland in umbraco/Umbraco-CMS#21684 * Performance: Optimize handling of content type updates by @kjac in umbraco/Umbraco-CMS#21910 * Backoffice Performance: Add inflight request deduplication to item data request managers by @madsrasmussen in umbraco/Umbraco-CMS#21767 * URL and Alias Caches: Optimize for invariant documents by @AndyButland in umbraco/Umbraco-CMS#21558 * Custom Views: Prevent re-rendering Block Views and Properties by @rickbutterfield in umbraco/Umbraco-CMS#21186 * Core: Minimize await to a single JS cycle (refactor #21186) by @nielslyngsoe in umbraco/Umbraco-CMS#22074 * Auth: Skip /token refresh when access token is still valid by @iOvergaard in umbraco/Umbraco-CMS#22087 * Memory Management: Dispose `IDisposable` resources correctly in four internal classes by @AndyButland in umbraco/Umbraco-CMS#22014 * Redirect Tracking: Fix segment change detection and optimise descendant traversal (closes #22082) by @AndyButland in umbraco/Umbraco-CMS#22091 ### 🌈 Accessibility Improvements * Entity Actions: Adds a descriptive title to the first action so you know what it does by @iOvergaard in umbraco/Umbraco-CMS#21739 * Search field: Added aria-label and name to search input for accessibility (closes #21938) by @andreaslborg in umbraco/Umbraco-CMS#21962 * List view: Added labels entity bulk action buttons by @andreaslborg in umbraco/Umbraco-CMS#21964 * Accessibility: Add title attributes to buttons in block list entry and property editor UI by @manutdkid77 in umbraco/Umbraco-CMS#21842 * Accessibility: Add tooltips to block grid entry actions by @manutdkid77 in umbraco/Umbraco-CMS#21958 * Accessibility: Added `title` attribute for icon in content types by @TechPdo in umbraco/Umbraco-CMS#21956 ### 🚀 New Features ... (truncated) Commits viewable in [compare view](umbraco/Umbraco-CMS@release-17.2.2...release-17.3.0). </details> [](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details> --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Alexander Seeliger <alexsee@users.noreply.github.com>
Description
This PR addresses #21938, which notes that the search input field lacks a programmatic label, causing accessibility issues and Google Console warnings.
Previously, the search input only had a
placeholderattribute but nonameor accessible label (aria-label). This caused:idornameattributesTo fix this, the search input now includes:
name="search-input"attribute to provide form field identificationaria-labelattribute using the localized placeholder textThese attributes work together to ensure the input is properly labeled and accessible to assistive technologies, while maintaining the existing visual design and behavior.
Testing
Default setup - Open the Umbraco backoffice, click the search icon, and verify the search input is visible and functional with improved accessibility.
Screen reader testing - Using NVDA, JAWS, or similar, the input field should be announced with its label ("Type to search...") and properly identified as a text input.
Developer console - Verify no warnings about missing form field identification and that the
nameandaria-labelattributes are present on the input element.Search functionality - Type in the search field, verify results appear correctly, navigate using keyboard (Arrow Up/Down, Tab), and verify Enter key closes the modal.